@import "shared_styles";

.toolbar {
    flex: 0 0 auto;
    border: 1px solid gray;
    padding: 0.5em;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5em;
    width: 90%;
    height: 1.5em;
    text-align: center;
    max-width: 40em;

    .scale_gizmo {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    .scale_button {
        @extend .icon_button;
        font-size: 1.2em;
    }

    .scale {
        display: inline-block;
        width: 3em;
        margin: 0.5em;
    }

    .control_button {
        font-size: 2em;
    }

    .button_group {
        border-left: 1px solid gray;
        border-right: 1px solid gray;
        white-space: nowrap;
        padding: 0 0.1em;

        span {
            opacity: 0.5;
            display: inline-block;

            &.active {
                opacity: 1;
            }
        }

    }
}